/* You can add global styles to this file, and also import other style files */
$enable-rounded: false;
$font-size-base: 0.9rem;
@import "../../node_modules/bootstrap/scss/bootstrap";
$default-animation-speed: 1s;
$animation-speed: (xfast: .2s, fast: .5s, normal: 1s, slow: 1.5s, xslow: 2s);
$theme-colors: map_merge($colors, $theme-colors);
$animation-delay: (
  "100": 100ms,
  "200": 200ms,
  "300": 300ms,
  "400": 400ms,
  "500": 500ms,
  "600": 600ms,
  "700": 700ms,
  "800": 800ms,
  "900": 900ms,
  "1" : 1s,
  "2" : 2s,
  "3" : 3s,
  "4" : 4s,
  "5" : 5s,
);

@function pxToRem($px) {
  @return $px / 16px * 1rem
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }

  .badge-#{$color} {
    @include badge-variant($value);
  }

  .bg-#{$color} {
    background-color: $value;
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

@each $key, $value in $animation-delay {
  .animated-delay-#{$key} {
    animation-delay: $value;
  }
}

.font-75 {
  font-size: 75%;
}

.badge {
  vertical-align: middle !important;
  max-width: 100% !important;
}

@mixin text-break() {
  word-wrap: break-word;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  display: inline;
  font-size: 75%;
  font-weight: bold;
  background-color: $light;
  padding: 0 0.4em;
  &.text-break-hover:hover {
    cursor: pointer;
    background-color: darken($light, 10%);
  }
}

.text-break {
  @include text-break()
}

